<template>
	<view class="userInfo">
		<navbar :showBack="true">个人资料</navbar>
		<form @submit="goSubmit">
			<view class="list">
				<view class="item acea-row row-between-wrapper">
					<view>头像</view>
					<view class="avatar-box" @click="changeImg"><image :src="pic" mode=""></image></view>
				</view>
				<view class="item acea-row row-between-wrapper">
					<view>昵称</view>
					<view class="input"><input type="text" name="nickname" @blur="changeName" @input="changeName" :value="nickname" /></view>
				</view>
				<view class="item acea-row row-between-wrapper">
					<view>手机号码</view>
					<navigator url="" class="input">点击绑定手机号<text class="iconfont icon-xiangyou"></text></navigator>
				</view>
				<view class="item acea-row row-between-wrapper">
					<view>ID号</view>
					<view class="input acea-row row-between-wrapper">
						<input type="text" value="10" class="id" disabled />
						<text class="iconfont icon-suozi"></text>
					</view>
				</view>
				<view class="item acea-row row-between-wrapper" @click="openSetting">
					<view>权限设置</view>
					<view class="input">点击管理<text class="iconfont icon-xiangyou"></text></view>
				</view>
			</view>
			<button class="modifyBnt bg-color" form-type="submit">保存修改</button>
		</form>
		<!-- 进度条开始 -->
		<line-progress></line-progress>
		<!-- 进度条结束 -->
	</view>
</template>

<script>
	import api from "@/api/api.js";
	const app = getApp();
	export default{
		data(){
			return{
				pic:"",
				nickname:""
			}
		},
		onLoad() {
			const that = this;
			api.user.checkLogin().then(()=>{
				let userInfo = app.globalData.userInfo;
				that.pic = userInfo.avatar;
				that.nickname = userInfo.nickname
			})
		},
		methods:{
			changeImg:function(){
				const that = this;
				api.upload.uploadImg("touxiang",1).then((e)=>{
					if(e.status == 200){
						that.pic = e.data.url;
					}
				})
			},
			changeName:function(e){
				let value = e.detail.value;
				this.nickname = value;
			},
			openSetting:function(){
				uni.openSetting({})
			},
			goSubmit:function(){
				let avatar = this.pic;
				let nickname = this.nickname;
				console.log(avatar,nickname)
				api.user.editUser({avatar,nickname}).then((e)=>{
					console.log(e)
					if(e.status == 200){
						uni.showToast({
							icon:"success",
							title:e.msg,
							duration:800,
						})
						setTimeout(function(){
							uni.navigateBack({})
						},800)
					}else{
						uni.showToast({
							icon:"loading",
							title:e.msg,
							duration:800
						})
					}
				})
			}
		}
	}
</script>

<style>
	.userInfo form .list{
		margin-top: 15rpx;
		background-color: #fff;
	}
	.userInfo form .list .item{
		padding: 30rpx 30rpx 30rpx 0;
		border-bottom: 1rpx solid #f2f2f2;
		margin-left: 30rpx;
		font-size: 32rpx;
		color: #282828;
	}
	.userInfo form .list .item .avatar-box{
		width: 96rpx;
		height: 96rpx;
	}
	.userInfo form .list .item .avatar-box image{
		border-radius: 50%;
	}
	.userInfo form .list .item .input{
		width: 415rpx;
		text-align: right;
		color: #868686;
	}
	.userInfo form .list .item .input .id{
		width: 365rpx;
	}
	.userInfo form .list .item .input .iconfont{
		font-size: 35rpx;
	}
	.userInfo form .modifyBnt{
		font-size: 32rpx;
		color: #fff;
		width: 690rpx;
		height: 90rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 90rpx;
		margin: 76rpx auto 0 auto;
	}
</style>
